<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三级联动案例</title>
	<style type="text/css">
		select{
			width: 100px;
			height: 25px;
		}
	</style>
</head>
<body>

<span>省：</span>
<select class="sheng">
	<option>请选择</option>
</select>
<span>市：</span>
<select class="shi"></select>
<span>区：</span>
<select class="qu"></select>

<script>
//获取到三个选择列表
        var shengSelect =document.querySelector(".sheng");
        var shiSelect =document.querySelector(".shi");
        var quSelect =document.querySelector(".qu");
        //var shenglist=['广西壮族自治区','广东','湖北'];
        
        //页面加载完成发送ajax请求，获取省数据
        var shengIndex =0;
        (function(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange =function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        shenglist = JSON.parse(xhr.responseText);
                        //加载省
                        for(var i=0;i<shenglist.length;i++){
                            var shengOption = new Option(shenglist[i]);
                            shengSelect.options.add(shengOption);
                        }
                    }
                }
            }
            xhr.open('get','threeLevelsDemo.php?type=0',true);
            xhr.send();
        }());
        
        //点击省加载市
        shengSelect.onchange =function(eve){
            shengIndex =eve.target.selectedIndex-1;
            if(shengIndex== -1){
                shiSelect.options.length = 0;
                quSelect.options.length = 0;
            }else{
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange =function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200){
                            //console.log(JSON.parse(xhr.responseText));
                            var success = JSON.parse(xhr.responseText);
                            var shilist =success[0];
                            shiSelect.options.length = 0;
                            for(var j=0;j<shilist.length;j++){
                                var shiOption = new Option(shilist[j]);
                                shiSelect.options.add(shiOption);
                            }
                            //加载市的同时加载第一个区
                            var qulist = success[1];
                            quSelect.options.length =0;
                            for(var n=0;n<qulist.length;n++){
                                var quOption = new Option(qulist[n]);
                                quSelect.options.add(quOption);
                            }
                        }
                    }
                }
                xhr.open('get','threeLevelsDemo.php?type=1&sheng='+shengIndex,true);
                xhr.send();
            }
        }
        
        //点击市加载区
        shiSelect.onchange =function(eve){
            shiIndex =eve.target.selectedIndex;
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange =function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        //console.log(JSON.parse(xhr.responseText));
                        var qulist = JSON.parse(xhr.responseText);
                        //shiSelect.options.length = 0;
                        quSelect.options.length =0;
                        for(var n=0;n<qulist.length;n++){
                            var quOption = new Option(qulist[n]);
                            quSelect.options.add(quOption);
                        }
                    }
                }
            }
            xhr.open('get','threeLevelsDemo.php?type=2&sheng='+shengIndex+'&shi='+shiIndex,true);
            xhr.send();
        }

        
	// var shengSelect = document.querySelector('.sheng');
	// var shiSelect = document.querySelector('.shi');
	// var quSelect = document.querySelector('.qu');
	// // var shengList = ['河北省','黑龙江省','日本省'];
	// // var shiList = [['保定市','石家庄'],['大庆市','哈尔滨市','齐齐哈尔市'],['广岛市','长崎市']];
	// // var quList = [
	// // 				[['保定1区','保定2区'],['石1区','石3区','石9区']],
	// // 				[['大庆2区','大庆11区'],['哈1区','哈2区'],['齐2区','齐3区','齐4区']],
	// // 				[['广岛1区','广岛2区','广岛3区'],['长崎2区','长崎3区','长崎4区','长崎原子区']]
	// // 			];
	// var shengIndex = 0;//选中的省的下标


	// //页面加载完成之后，立即发一个ajax请求
	// //请求省数据，以便填充select
	// (function(){
	// 	var xhr = new XMLHttpRequest();
	// 	xhr.onreadystatechange = function(){
	// 		if(xhr.readyState == 4){
	// 			if(xhr.status == 200){
	// 				// console.log(JSON.parse(xhr.responseText));
					
	// 				var shengList = JSON.parse(xhr.responseText);

	// 				for(var i=0; i<shengList.length;i++){
	// 					var shengOption = new Option(shengList[i]);
	// 					shengSelect.options.add(shengOption);
	// 				}
	// 			}
	// 		}
	// 	};
	// 	//type是get请求传的参数，0代表省，1代表市，2代表区
	// 	xhr.open('get','threeLevelsDemo.php?type=0',true);
	// 	xhr.send(null);
	// }());


	// shengSelect.onchange = function(eve){
	// 	var shengIndex = eve.target.selectedIndex-1;
	// 	//请求市数据
	// 	var xhr = new XMLHttpRequest();
	// 	xhr.onreadystatechange = function(){
	// 		if(xhr.readyState == 4){
	// 			if(xhr.status == 200){
	// 				// console.log(JSON.parse(xhr.responseText));
	// 				//所有的操作都需要在市数据回来之后进行，在数据未能
	// 				var shiList = JSON.parse(xhr.responseText);
	// 				// console.log(shiList);

	// 				if(shengIndex == -1){
	// 					//请选择选项,清空所有
	// 					shiSelect.options.length = 0;
	// 					// quSelect.options.length = 0;
	// 				}else{
	// 					//（4）添加当前所选的省对应的市内容之前，先清空市select内容
	// 					shiSelect.options.length = 0;
	// 					// quSelect.options.length = 0;
	// 					//（3）当选中了某个省之后，加载这个省对应的市
	// 				// console.log(shiList[shengIndex]);
	// 					for(var j=0;j<shiList.length;j++){
	// 						var shiOption = new Option(shiList[j]);
	// 						shiSelect.options.add(shiOption);
	// 					}
	// 					//加载市的同时，加载第一个是的所有区
	// 					// for(var k = 0;k<quList[shengIndex][0].length; k++){
	// 					// 	var quOption = new Option(quList[shengIndex][0][k]);
	// 					// 	quSelect.options.add(quOption);
	// 					// }
	// 				}
	// 			}
	// 		}

	// 	};
	// 	//type是get请求传的参数，0代表省，1代表市，2代表区
	// 	xhr.open('get','threeLevelsDemo.php?type=1&sheng='+shengIndex,true);
	// 	xhr.send(null);
		
	// };

	// shiSelect.onchange =function(eve){
 //            shiIndex =eve.target.selectedIndex;
 //            var xhr = new XMLHttpRequest();
 //            xhr.onreadystatechange =function(){
 //                if(xhr.readyState==4){
 //                    if(xhr.status==200){
 //                        //console.log(JSON.parse(xhr.responseText));
 //                        var qulist = JSON.parse(xhr.responseText);
 //                        //shiSelect.options.length = 0;
 //                        quSelect.options.length =0;
 //                        for(var n=0;n<qulist.length;n++){
 //                            var quOption = new Option(qulist[n]);
 //                            quSelect.options.add(quOption);
 //                        }
 //                    }
 //                }
 //            };
	// 	//type是get请求传的参数，0代表省，1代表市，2代表区
	// 		xhr.open('get','threeLevelsDemo.php?type=2&sheng='+shengIndex+'&shi='+shiIndex,true);
	// 		xhr.send(null);
	// };
		
		

	// //点击市 区变化
	// shiSelect.onchange = function(eve){
	// 	//市的下标
	// 	var shiIndex = eve.target.selectedIndex;

	// 	quSelect.options.length = 0;
	// 	for(var n=0; n<quList[shengIndex][shiIndex].length;n++){
	// 		var quOption = new Option(quList[shengIndex][shiIndex][n]);
	// 		quSelect.options.add(quOption);
	// 	}
	// };




//单纯JavaScript实现三级联动
	// var shengSelect = document.querySelector('.sheng');
	// var shiSelect = document.querySelector('.shi');
	// var quSelect = document.querySelector('.qu');
	// var shengList = ['河北省','黑龙江省','日本省'];
	// var shiList = [['保定市','石家庄'],['大庆市','哈尔滨市','齐齐哈尔市'],['广岛市','长崎市']];
	// var quList = [
	// 				[['保定1区','保定2区'],['石1区','石3区','石9区']],
	// 				[['大庆2区','大庆11区'],['哈1区','哈2区'],['齐2区','齐3区','齐4区']],
	// 				[['广岛1区','广岛2区','广岛3区'],['长崎2区','长崎3区','长崎4区','长崎原子区']]
	// 			];
	// var shengIndex = 0;//选中的省的下标

	// //（1）页面加载的时候，先将省下拉框中填入内容
	// for(var i=0; i<shengList.length;i++){
	// 	var shengOption = new Option(shengList[i]);
	// 	shengSelect.options.add(shengOption);
	// }
	// //（2）对下拉列表添加change事件，表示当其所代表的value值发生变更时调用
	// shengSelect.onchange = function(eve){
	// 	shengIndex = eve.target.selectedIndex-1;
	// 	if(shengIndex == -1){
	// 		//请选择选项,清空所有
	// 		shiSelect.options.length = 0;
	// 		quSelect.options.length = 0;
	// 	}else{
	// 		//（4）添加当前所选的省对应的市内容之前，先清空市select内容
	// 		shiSelect.options.length = 0;
	// 		quSelect.options.length = 0;
	// 		//（3）当选中了某个省之后，加载这个省对应的市
	// 	// console.log(shiList[shengIndex]);
	// 		for(var j=0;j<shiList[shengIndex].length;j++){
	// 			var shiOption = new Option(shiList[shengIndex][j]);
	// 			shiSelect.options.add(shiOption);
	// 		}
	// 		//加载市的同时，加载第一个是的所有区
	// 		for(var k = 0;k<quList[shengIndex][0].length; k++){
	// 			var quOption = new Option(quList[shengIndex][0][k]);
	// 			quSelect.options.add(quOption);
	// 		}
	// 	}
	// };

	// //点击市 区变化
	// shiSelect.onchange = function(eve){
	// 	//市的下标
	// 	var shiIndex = eve.target.selectedIndex;

	// 	quSelect.options.length = 0;
	// 	for(var n=0; n<quList[shengIndex][shiIndex].length;n++){
	// 		var quOption = new Option(quList[shengIndex][shiIndex][n]);
	// 		quSelect.options.add(quOption);
	// 	}
	// };
</script>


</body>
</html>